<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>align-content</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .box {
        
        border: 1px black solid;
        width: 402px;
        height: 100px;
        margin: 100px auto 0;

        /* flex布局 */
        display: flex;
        /*
        设置排列方式为横向排列flex-direction:row;
        并且设置换行，flex-wrap:wrap;
        这样这个属性的设置才会起作用。 */
        flex-direction: row;
        flex-wrap: wrap;

        /*align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。*/
        /*语法：align-content: flex-start | flex-end | center | space-between | space-around | stretch;*/
        /*1、flex-start：与交叉轴的起点对齐。*/
        /* align-content: flex-start; */
        /*2、flex-end：与交叉轴的终点对齐。*/
        /* align-content: flex-end; */
        /*3、center：与交叉轴的中点对齐。*/
        /* align-content: center; */
        /*4、space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。*/
        /* align-content: space-between; */
        /*5、space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。*/
        /* align-content: space-around; */
        /*6、stretch:默认设置，会拉伸容器内每个项目占用的空间，填充方式为给每个项目下方增加空白。第一个项目默认从容器顶端开始排列。*/
        align-content: stretch; /* 去除项目高度 */
    }

    .item {
        width: 200px;
        /* height: 30px; */
    }

    .item:first-child {
        background: red;
    }

    .item:nth-child(2) {
        background: blue;
    }

    .item:nth-child(3) {
        background: green;
    }

    .item:last-child {
        background: purple;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

</html>